<template>
  <div>
    <!-- 文件选择输入 -->
    <input type="file" accept="image/*" @change="onFileChange">
    <!-- 图片裁剪容器 -->
    <div v-if="imageSrc">
      <img ref="image" :src="imageSrc" alt="Image to crop">
    </div>
    <!-- 裁剪和控制按钮 -->
    <button @click="cropImage" :disabled="!cropper">裁剪</button>
    <button @click="uploadImage" :disabled="!cropResult">上传</button>
  </div>
</template>

<script>
import Cropper from 'cropperjs';
import 'cropperjs/dist/cropper.css'; // 引入样式
import axios from 'axios'; // 用于上传

export default {
  data() {
    return {
      imageSrc: '',    // 存储图片的 Base64 字符串
      cropper: null,  // Cropper 实例
      cropResult: null // 裁剪后的结果（Base64）
    };
  },
  methods: {
    // 当选择文件时触发
    onFileChange(e) {
      const file = e.target.files[0];
      if (!file) return;

      const reader = new FileReader();
      reader.onload = (event) => {
        this.imageSrc = event.target.result;
        // 在下次 DOM 更新后初始化 Cropper
        this.$nextTick(() => {
          if (this.cropper) {
            this.cropper.destroy(); // 销毁旧的 Cropper 实例
          }
          // 初始化 Cropper
          this.cropper = new Cropper(this.$refs.image, {
            aspectRatio: 16 / 9, // 设置裁剪框的固定比例
            viewMode: 1,         // 视图模式，1 限制裁剪框不超过图片范围
            autoCropArea: 0.8,   // 初始裁剪区域占图片的比例
            // 其他配置选项可根据需要添加
          });
        });
      };
      reader.readAsDataURL(file); // 将文件读取为 Data URL
    },
    // 裁剪图片
    cropImage() {
      if (!this.cropper) return;
      // 获取裁剪后的 Canvas 元素，并转换为 Base64 字符串
      const canvas = this.cropper.getCroppedCanvas();
      if (canvas) {
        this.cropResult = canvas.toDataURL('image/jpeg'); // 可以指定格式和质量
      }
    },
    // 上传图片
    uploadImage() {
      if (!this.cropResult) return;

      // 将 Base64 转换为 Blob 对象，便于上传
      fetch(this.cropResult)
        .then(res => res.blob())
        .then(blob => {
          const formData = new FormData();
          formData.append('file', blob, 'cropped-image.jpg'); // 添加文件数据

          // 使用 axios 上传到服务器
          axios.post('/your-upload-endpoint', formData, {
            headers: {
              'Content-Type': 'multipart/form-data'
            }
          })
          .then(response => {
            console.log('上传成功', response.data);
            // 处理上传成功后的逻辑，例如提示用户、更新图片显示等
          })
          .catch(error => {
            console.error('上传出错', error);
            // 处理错误逻辑
          });
        });
    }
  },
  // 组件销毁前，清理 Cropper 实例
  beforeDestroy() {
    if (this.cropper) {
      this.cropper.destroy();
    }
  }
};
</script>

<style>

</style>